<template>
  <header class="header">
  	<span>后台管理系统</span>
  	 
  	<el-dropdown class="pull-right"  @command="handleCommand">
		  <span class="el-dropdown-link">
		    赵星辰<span>财务科长</span><i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		     <el-dropdown-item command=" changeRoles">更换角色</el-dropdown-item>
		    <el-dropdown-item command="exit">退出</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
	<el-dropdown class="pull-right"  @command="handleCommand">
		  <span class="el-dropdown-link">
		    切换账套<i class="el-icon-arrow-down el-icon--right"></i>
		  </span>
		  <el-dropdown-menu slot="dropdown">
		     <el-dropdown-item>账套1</el-dropdown-item>
		    <el-dropdown-item>账套2</el-dropdown-item>
		  </el-dropdown-menu>
		</el-dropdown>
	 <span class="pull-right" style="font-size:14px;">02:11:11</span>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      
    }
  },
  methods: {
    	menuClick(){
    		this.$emit('menuClick' );
    	},
    	handleCommand(command){
    		 if(command=='exit'){
    		 		this.$guyu.logoff();
    		 }else if(command=='changePassword'){
    		 	  this.$router.push('/changePassword');
    		 }
    	}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
/* @import '../../assets/color.scss'; */
.header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
		height: 60px;
		width: 100%;
    line-height: 60px;
    background:rgb(24, 5, 39);
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    font-size: 20px;
    padding-left: 15px;
}
.el-dropdown-link {
		color: #fff;
}
.el-dropdown {
		margin-right: 15px;
		padding-left: 15px;
		padding-right: 15px;
	/* 	background-color: rgba(255,255,255,.3); */
}
</style>
